<template>
    <div class="table">
        <div class="left">
            <div class="table_item bor_top bor_left">5月</div>
            <div class="table_item bor_left">星期</div>
            <div class="table_item bor_left">夜班</div>
            <div class="table_item bor_left">白班</div>
            <div class="table_item bor_left">中班</div>
        </div>
        <div v-for="item in tableData.list" class="right">
            <div class="table_item bor_top">{{ item.num }}</div>
            <div class="table_item">{{ item.week }}</div>
            <div class="table_item">{{ item.nightShift }}</div>
            <div class="table_item">{{ item.dayShift }}</div>
            <div class="table_item">{{ item.middleShift }}</div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { schedulingGroupQueryPage } from "@/http/scheduling";

const props = defineProps({
    searchData: {
        type: Object,
        default: {}
    }
})

let tableData = reactive({
    list: [
        { num: 1, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 2, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 3, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 4, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 5, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 6, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 7, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 8, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 9, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 10, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 11, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 12, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 13, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 14, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 15, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 16, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 17, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 18, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 19, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 20, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 21, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 22, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 23, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 24, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 25, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 26, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 27, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 28, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 29, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
        { num: 30, week: '三', nightShift: '四', dayShift: "一", middleShift: "二" },
    ]
})

//schedulingGroupQueryPage
const getList = ()=>{
    schedulingGroupQueryPage(props.searchData).then((res:any)=>{

    })
}
</script>

<style lang="scss" scoped>
.table {
    display: flex;
    margin-bottom: 30px;

    .left {
        flex: 2;
       
    }

    .right {
        flex: 1;
    }
    .table_item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        border-right: 1px solid rgba(0, 0, 0, 0.15);
        text-align: center;
        height: 40px;
        line-height: 40px;
    }
    .bor_top {
        border-top: 1px solid rgba(0, 0, 0, 0.15);
    }
    .bor_left {
        border-left: 1px solid rgba(0, 0, 0, 0.15);
    }
}
</style>
